import React, { useEffect, useState } from 'react';
import { Modal, Table } from 'antd';
import { PermissionTableListItem } from '../../permission/permissionData';
import { queryPermission } from '../../permission/permissionService';
import { RoleTableListItem } from '../roleData.d';
import { getRolePermissionSelected } from '../roleService';

export interface FormValueType extends Partial<RoleTableListItem> {
}

export interface UpdateFormProps {
    onCancel: () => void;
    onSubmit: (values: {
        roleId: string;
        permissionIds: string[];
    }) => void;
    modalVisible: boolean;
    currentRole: string;
}

const RolePermissionForm: React.FC<UpdateFormProps> = (props) => {

    const [selectedRows, setSelectedRows] = useState<PermissionTableListItem[]>([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
    const [dataSource, setDataSource] = useState();

    const {
        onSubmit,
        onCancel,
        modalVisible,
        currentRole,
    } = props;

    useEffect(() => {
        queryPermission({ pageSize:10000 }).then(res=>{
            if(res.success){
                setDataSource(res.data);
            }
        });
    },[]);

    useEffect(() => {
        if (currentRole) {
            console.log('currentRole',currentRole);
            // 获取角色选择的权限
            getRolePermissionSelected({roleId:currentRole||'0'}).then(res=>{
                if(res.success){
                    const {data} = res;
                    setSelectedRowKeys(data);
                }
            })
        }else{
            setSelectedRowKeys([]);
        }
    }, [props.currentRole]);

    const handleSubmit = () => {
        const permissionIds = selectedRows.map(item=>item.permissionId||'');
        const data = {
            roleId: currentRole,
            permissionIds,
        }
        onSubmit(data);
    };


    const columns = [
        {
            title: '权限名称',
            key: 'permissionName',
            dataIndex: 'permissionName',
        },
        {
            title: '图标',
            key: 'icon',
            dataIndex: 'icon',
        },
        {
            title: '权限类型',
            key: 'permissionType',
            dataIndex: 'permissionType',
            render: (text:any)=>{
                let data = text;
                if(text===0){
                    data = '目录';
                }
                if(text===1){
                    data = '菜单';
                }
                if(text===2){
                    data = '按钮';
                }
                return data;
            },
        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            render: (text:any)=>{
                let data = text;
                if(text===0){
                    data = '禁用';
                }
                if(text===1){
                    data = '启用';
                }
                return data;
            },
        },
    ];

    const onChange = (selectedRowKeysData:any, selectedRowsData:any) => {
        setSelectedRowKeys(selectedRowKeysData)
        setSelectedRows(selectedRowsData)
    }
    const renderContent = () => {
        return (
            <>
            <Table
                key='rolePermissionTable'
                rowKey='permissionId'
                columns={columns}
                dataSource={dataSource}
                rowSelection={{
                    onChange,
                    checkStrictly: false,
                    selectedRowKeys
                }}
            />
            </>
        );
    };


    const modalFooter = { okText: '保存', onOk: handleSubmit, onCancel };

    return (
        <Modal
            key="roleModel"
            forceRender
            destroyOnClose
            title="权限设置"
            visible={modalVisible}
            width="600px"
            {...modalFooter}
        >

            {renderContent()}
        </Modal>
    );
};

export default RolePermissionForm;
